import React,{useState, useEffect} from 'react'
import {Card ,Space, Table, Tag  ,Tooltip} from 'antd'
import type { ColumnsType } from 'antd/es/table';
import {
    InfoCircleOutlined,
    CaretUpOutlined,
    CaretDownOutlined
  } from '@ant-design/icons';
import AreaChart from './areaChart/index'
import styles from '../index.less'
import { AnalysisData ,searchDataType} from '@/pages/Index/data';

export default function PreSreach(props:AnalysisData) {
    const [chartData, setChartData] = useState([]);
    useEffect(() => {
      if(props.searchData !== undefined && props.searchData !== null && props.searchData.length>0){
        setChartData( props.searchData || []);
      }
    });
    const areaProps ={
        height:100,
        xAxisData:{},
        yAxisData:{},
        xField:'timePeriod',
        yField:'value',
        forceFit:true,
        maxColumnWidth:10,
        data:[]
      }

      const columnsData = [
        {
          title: '排名',
          dataIndex: 'index',
          key: 'index',
        },
        {
          title: '搜索关键词',
          dataIndex: 'keyword',
          key: 'keyword',
          render: (text: React.ReactNode) => <a href="/">{text}</a>,
        },
        {
          title: '用户数',
          dataIndex: 'count',
          key: 'count',
          sorter: (a: { count: number }, b: { count: number }) => a.count - b.count,
          className: styles.alignRight,
        },
        {
          title: '周涨幅',
          dataIndex: 'range',
          key: 'range',
          sorter: (a: { range: number }, b: { range: number }) => a.range - b.range,
          render: (text: React.ReactNode,record:Item) => {
            let textNum:number = 0
            if(record.range === undefined || record.range === null){
              textNum = 0
            }else{
              textNum = record.range
            }
            return (
              <span>
                {
                  textNum === 0 ?'' :textNum>80?<CaretUpOutlined className={styles.upColor}/>:<CaretDownOutlined className={styles.downColor}/>
                }
                {
                  textNum === 0? <span>-</span>:<span>{textNum}%</span>
                }
                </span>
            )
          },
        },
      ];
      const tableData = props.tableData || []

  return (
    <div>
        <Card
            title="线上热门搜索"
            extra={<a href="#">...</a>}
            className={styles.preSreach}
            >
            <div className={styles.topSreach}>
              {
                chartData!== undefined && chartData!== null && chartData.length>0 &&
                chartData.map((item)=>{
                  let itemProps ={...areaProps,'data':item.data}
                  return (
                    <div className={styles.liSreach} key={item.title}>
                      <div>
                        <span>{item?.title}</span>
                        <Tooltip title={item?.title}>
                          <InfoCircleOutlined />
                        </Tooltip>
                      </div>
                      <div>
                        <span>{item?.total}</span>
                        <span>
                          <span>{item.totalTB}</span>
                          <CaretUpOutlined/>
                        </span>
                      </div>
                      <div>
                        {
                          <AreaChart {...itemProps}/>
                        }
                      </div>
                    </div>
                  )
                })
              }

            </div>
            <div className={styles.mT20}>
              {
                tableData !== undefined && tableData.length>0 &&
                <Table
                  rowKey={(record) => record.index}
                  columns={columnsData}
                  dataSource={tableData}
                  size="small"
                  pagination={{
                    style: { marginBottom: 0 },
                    pageSize: 5,
                  }}
                />
              }
            </div>
        </Card>
    </div>
  )
}
